<template>
	<view class="login-container">
		<view class="login-box">
			<view class="login-title">系统登录</view>
			<uv-form :model="loginForm" ref="uvFormRef" :rules="rules">
				<uv-form-item label="用户名" prop="username" labelWidth="100">
					<uv-input v-model="loginForm.username" placeholder="请输入用户名" border="none"></uv-input>
				</uv-form-item>
				<uv-form-item label="密码" prop="password" labelWidth="100">
					<uv-input v-model="loginForm.password" type="password" placeholder="请输入密码" border="none"></uv-input>
				</uv-form-item>
				<uv-form-item label="验证码" prop="captcha" labelWidth="100">
					<view class="captcha-container">
						<uv-input v-model="loginForm.captcha" placeholder="请输入验证码" border="none"></uv-input>
						<image :src="captchaUrl" class="captcha-img" @tap="refreshCaptcha"></image>
					</view>
				</uv-form-item>
			</uv-form>
			<view class="login-btn">
				<uv-button type="primary" text="登录" @click="handleLogin"></uv-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'


	const uvFormRef = ref(null)
	const captchaUrl = ref('')
	const captchaKey = ref('')

	const loginForm = reactive({
		username: '',
		password: '',
		captcha: ''
	})

	const rules = reactive({
		username: [{
			required: true,
			message: '请输入用户名',
			trigger: ['blur', 'change']
		}],
		password: [{
			required: true,
			message: '请输入密码',
			trigger: ['blur', 'change']
		}],
		captcha: [{
			required: true,
			message: '请输入验证码',
			trigger: ['blur', 'change']
		}]
	})

	const refreshCaptcha = () => {
		uni.$uv.http.get('/api/yyplatform/admin/layout/login/captcha').then(res => {
			console.log('res', res);
			if (res.code === 0) {
				captchaUrl.value = res.data.image
				captchaKey.value = res.data.uuid
			} else {
				uni.$uv.toast(res.msg)
			}
		});
	}


	const handleLogin = async () => {
		try {
			const valid = await uvFormRef.value.validate()
			if (valid) {
				// 构建表单数据对象
			const params = {
				'userName':loginForm.username,
				'password':loginForm.password,
				'captcha':loginForm.captcha,
				'captchaUuid':captchaKey.value
			}; 
				
			console.log('params', params);

				// 发送请求
				uni.$uv.http.post('/api/yyplatform/admin/layout/login/loginCheck', params, {
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					}
				}).then(res => {
					if (res.code === 0) {
						uni.$uv.toast('登录成功')
						uni.setStorageSync('token', res.data.jwtToken)
						uni.switchTab({
							url: '/pages/profile/profile'
						})
					} else {
						uni.$uv.toast(res.msg)
						refreshCaptcha()
					}
				})
			}
		} catch (error) {
			console.log('表单验证失败', error)
		}
	}

	onMounted(() => {
		refreshCaptcha()
	})
</script>

<style lang="scss">
	.login-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;

		.login-box {
			width: 90%;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

			.login-title {
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
				margin-bottom: 40rpx;
			}

			.login-btn {
				margin-top: 50rpx;
			}

			.captcha-container {
				display: flex;
				align-items: center;

				.captcha-img {
					width: 200rpx;
					height: 70rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>